<template>
	<view>
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': hieght}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click='navToBack'
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">修改用户名</text>
		</navBar>

		<view class="main_updateName"
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}">
			<view class="main_updateName_item">

				<u--form 
					labelPosition="left"
					:model="userInfo"
					:rules="rules"
					labelWidth="160"
					ref="uForm">
					<u-form-item label="新用户名"
						prop="name"
						borderBottom
						ref="item1">
						<u--input 
							v-model="userInfo.name"
							border="none"
							maxlength="32"
							placeholder="请输入用户名"></u--input>
					</u-form-item>
					<text class="title ">快起一个酷酷的名字吧！！！</text>
				</u--form>

				<view @click="saveName"
					style="margin-top: 110rpx;">
					<new-btn name="保存"
						bgColor="#EC4141"
						color="#FFF"></new-btn>
				</view>
			</view>

		</view>
		
		<!-- 模态框确认 -->
		<u-modal 
		:show="modalShow" 
		:title="modalInfo.title" 
		showConfirmButton
		showCancelButton
		@confirm='modalConfirm'
		@cancel='modalShow = false'
		:content='modalInfo.content'>
		
		</u-modal>

	</view>
</template>

<script>
	import {
		updateMallMemberInfo
	} from '@/api/setting.js'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			newBtn
		},
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		data() {
			return {
				statusBarHeight: '',
				hieght: '',
				userInfo: {
					name: ''
				},
				rules: {
					'name': [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}]
				},
				modalShow:false,//模态框
				modalInfo:{ //模态框提示对象内容
					title:'',
					content:''
				}

			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_updateName')
			})
		},
		methods: {
			//返回上一级
			navToBack(){
				uni.navigateTo({
					url:'/page_setting/settingHome'
				})
			},
			//保存用户名
			saveName() {
				//校验通过
				this.$refs.uForm.validate().then(res => {
					this.modalShow = true
					this.modalInfo.title='温馨提示'
					this.modalInfo.content = '是否要保存当前用户名？'
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			//模态框提示确认
			async modalConfirm(){
				let resr = await updateMallMemberInfo({
					name:this.userInfo.name,
					phone:'',
					password:'',
					file:''
				})
				if(resr.code == 2000){
					this.Utils.toast('保存成功')
					this.modalShow = false;
					uni.navigateBack();
				}else{
					this.Utils.toast(`${resr.msg}`)
				}
			}
			
		}
	}
</script>

<style lang="scss"
	scoped>
	.main_updateName {
		width: 100%;
		height: 500px;
		box-sizing: border-box;
		padding: 60rpx;

		.main_updateName_item {
			width: 100%;
			height: 100%;

		}
	}

	.title {
		font-size: $font_size_12;
		color: $text_color_808080;
		margin-top: 20rpx;
	}

	/deep/.u-form-item__body {
		flex-direction: column !important;
	}

	/deep/.u-form-item__body__left__content__label {
		font-size: 32rpx;
		color: $text_color_333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 0 !important;
	}
</style>